<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>首页</title>
        <link href="css/desk.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="script/define.js"></script>
        <script type="text/javascript" src="script/jquery.min.js"></script>
        <script type="text/javascript" src="script/jquery.easing.js"></script>
        <script type="text/javascript" src="script/drag.js"></script>
        <script type="text/javascript" src="script/circle.js"></script>
		<script type="text/javascript" src="script/slider.js"></script>
		<style>
		</style>
    </head>
    <body>
        <div class="main-content">
            <div class="content-home">
                <div class="home">
                    <div class="search-pannel">
                        <div class="search">
                            <input class="keyword" type="text" title="输入搜索" /><input class="submit" type="button" title="搜索" />
                        </div>
                    </div>
                    <div id="nav-pannel" class="nav-pannel">
                        <div style="position:absolute; top:0; left:0;">
                            <div class="circle">
                                <div class="outer-circle">
                                </div>
                                <div class="inner-circle">
                                    <div class="circle-info">
                                        asdfasdfasd
                                    </div>
                                </div>
                                <div class="circle-content">
                                    <span class="weibo"></span>
                                    <span class="renren"></span>
                                    <span class="qqzone"></span>
                                    <span class="kaixin"></span>
                                    <span class="douban"></span>
                                    <span class="qqzone"></span>
                                    <span class="weibo"></span>
                                    <span class="renren"></span>
                                    <span class="qqzone"></span>
                                    <span class="kaixin"></span>
                                    <span class="douban"></span>
                                    <span class="qqzone"></span>
                                    <span class="weibo"></span>
                                    <span class="renren"></span>
                                    <span class="qqzone"></span>
                                    <span class="kaixin"></span>
                                    <span class="douban"></span>
                                    <span class="qqzone"></span>
                                    <span class="weibo"></span>
                                    <span class="renren"></span>
                                    <span class="qqzone"></span>
                                    <span class="kaixin"></span>
                                    <span class="douban"></span>
                                    <span class="qqzone"></span>
                                    <span class="weibo"></span>
                                    <span class="renren"></span>
                                </div>
                            </div>
                            <div class="circle">
                                <div class="outer-circle">
                                </div>
                                <div class="inner-circle">
                                    <div class="circle-info">
                                        <div class="circle-info-cnt">
                                            <p>
                                                论坛
                                            </p>
                                            <ul class="rang">
                                                <li><span class="app-name">新浪新闻</span><span class="view-num">点击数:35k</span></li>
                                                <li><span class="app-name">网易新闻</span><span class="view-num">点击数:34k</span></li>
                                                <li><span class="app-name">搜狐新闻</span><span class="view-num">点击数:32k</span></li>
                                                <li><span class="app-name">凤凰新闻</span><span class="view-num">点击数:23k</span></li>
                                                <li>更多排名</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="circle-content">
                                    <span class="weibo"></span>
                                    <span class="renren"></span>
                                    <span class="qqzone"></span>
                                    <span class="kaixin"></span>
                                    <span class="douban"></span>
                                    <span class="qqzone"></span>
                                    <span class="weibo"></span>
                                    <span class="renren"></span>
                                    <span class="qqzone"></span>
                                    <span class="kaixin"></span>
                                    <span class="douban"></span>
                                    <span class="qqzone"></span>
                                    <span class="weibo"></span>
                                    <span class="renren"></span>
                                    <span class="qqzone"></span>
                                    <span class="kaixin"></span>
                                    <span class="douban"></span>
                                    <span class="qqzone"></span>
                                    <span class="weibo"></span>
                                    <span class="renren"></span>
                                    <span class="qqzone"></span>
                                    <span class="kaixin"></span>
                                    <span class="douban"></span>
                                    <span class="qqzone"></span>
                                    <span class="weibo"></span>
                                    <span class="renren"></span>
                                </div>
                            </div>
                            <div class="circle">
                                <div class="outer-circle">
                                </div>
                                <div class="inner-circle">
                                    <div class="circle-info">
                                        <div class="circle-info-cnt">
                                            <p>
                                                新闻中心
                                            </p>
                                            <ul class="rang">
                                                <li><span class="app-name">新浪新闻</span><span class="view-num">点击数:35k</span></li>
                                                <li><span class="app-name">网易新闻</span><span class="view-num">点击数:34k</span></li>
                                                <li><span class="app-name">搜狐新闻</span><span class="view-num">点击数:32k</span></li>
                                                <li><span class="app-name">凤凰新闻</span><span class="view-num">点击数:23k</span></li>
                                                <li>更多排名</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="circle-content">
                                    <span class="weibo" title="微博"></span>
                                    <span class="renren"></span>
                                    <span class="qqzone"></span>
                                    <span class="kaixin"></span>
                                    <span class="douban"></span>
                                    <span class="qqzone"></span>
                                    <span class="weibo"></span>
                                    <span class="renren"></span>
                                    <span class="qqzone"></span>
                                    <span class="kaixin"></span>
                                    <span class="douban"></span>
                                    <span class="qqzone"></span>
                                    <span class="weibo"></span>
                                    <span class="renren"></span>
                                    <span class="qqzone"></span>
                                    <span class="kaixin"></span>
                                    <span class="douban"></span>
                                    <span class="qqzone"></span>
                                    <span class="weibo"></span>
                                    <span class="renren"></span>
                                    <span class="qqzone"></span>
                                    <span class="kaixin"></span>
                                    <span class="douban"></span>
                                    <span class="qqzone"></span>
                                    <span class="weibo"></span>
                                    <span class="renren"></span>
                                </div>
                            </div>
                            <div class="circle">
                                <div class="outer-circle">
                                </div>
                                <div class="inner-circle">
                                    <div class="circle-info">
                                        <div class="circle-info-cnt">
                                            <p>
                                                社交网络
                                            </p>
                                            <ul class="rang">
                                                <li><span class="app-name">新浪微博</span><span class="view-num">点击数:35k</span></li>
                                                <li><span class="app-name">&nbsp;&nbsp; qq空间</span><span class="view-num">点击数:34k</span></li>
                                                <li><span class="app-name">&nbsp;&nbsp; 人人网</span><span class="view-num">点击数:32k</span></li>
                                                <li><span class="app-name">&nbsp;&nbsp; 开心网</span><span class="view-num">点击数:23k</span></li>
                                                <li>更多排名</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="circle-content">
                                    <span class="weibo"></span>
                                    <span class="renren"></span>
                                    <span class="qqzone"></span>
                                    <span class="kaixin"></span>
                                    <span class="douban"></span>
                                    <span class="email"></span>
                                    <span class="sohubai"></span>
                                    <span class="baiduhi"></span>
                                    <span class="wangyi"></span>
                                    <span class="kaixin"></span>
                                    <span class="douban"></span>
                                    <span class="qqzone"></span>
                                    <span class="weibo"></span>
                                    <span class="renren"></span>
                                    <span class="qqzone"></span>
                                    <span class="kaixin"></span>
                                    <span class="douban"></span>
                                    <span class="qqzone"></span>
                                    <span class="weibo"></span>
                                    <span class="renren"></span>
                                    <span class="qqzone"></span>
                                    <span class="kaixin"></span>
                                    <span class="douban"></span>
                                    <span class="qqzone"></span>
                                    <span class="weibo"></span>
                                    <span class="renren"></span>
                                </div>
                            </div>
                            <div class="circle">
                                <div class="outer-circle">
                                </div>
                                <div class="inner-circle">
                                </div>
                                <div class="circle-content">
                                    <span class="weibo"></span>
                                    <span class="renren"></span>
                                    <span class="qqzone"></span>
                                    <span class="kaixin"></span>
                                    <span class="douban"></span>
                                    <span class="qqzone"></span>
                                    <span class="weibo"></span>
                                    <span class="renren"></span>
                                    <span class="qqzone"></span>
                                    <span class="kaixin"></span>
                                    <span class="douban"></span>
                                    <span class="qqzone"></span>
                                    <span class="weibo"></span>
                                    <span class="renren"></span>
                                    <span class="qqzone"></span>
                                    <span class="kaixin"></span>
                                    <span class="douban"></span>
                                    <span class="qqzone"></span>
                                    <span class="weibo"></span>
                                    <span class="renren"></span>
                                    <span class="qqzone"></span>
                                    <span class="kaixin"></span>
                                    <span class="douban"></span>
                                    <span class="qqzone"></span>
                                    <span class="weibo"></span>
                                    <span class="renren"></span>
                                </div>
                            </div>
                        </div>
                        <!--<div class="prev">向前</div>
                        <div class="next">向后</div>-->
                    </div>
                    <div class="notify-pannel" style="height:40px">
                        <div class="notify">
                            adfa
                        </div>
                        <div class="notify">
                            asdf
                        </div>
                        <div class="notify">
                            asdf
                        </div>
                        <div class="notify">
                            asdf
                        </div>
                        <div class="notify">
                            asdfasdf
                        </div>
                    </div>
					<div id="test-slider"></div>
					<div id="test-slider1"></div>
					<div><input id="prev" type="button" value="向前" /><input id="next" type="button" value="向后" /></div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            
            var generateArcListCorrdinate = function(option){
                //更新坐标系(就不根据当前的元素取值了，直接根据窗口计算就好了)
                var moveToX = option.relativeX || 0;
                var moveToY = option.relativeX || 0;
                //选定半径(半径要有适当的间隔)
                var initRadius = option.radius || 100;
                //这个就是步长，每隔多少，算一下
                var vtlLen = option.stepLen || 32;
                var calculateAngel = function(partNum, orginDeg){
                    if (typeof partNum === undefined || orginDeg === undefined) {
                        return;
                    }
                    var relDeg = (180 - orginDeg) / 2;
                    var res = relDeg - partNum * orginDeg;
                    return isNaN(res) ? 0 : res;
                }
                var getCircle = function(stepLen, radius){
                    if (!stepLen || !radius) {
                        return;
                    }
                    var vtlLen = stepLen, initRadius = radius, tpOne = [];
                    var ag = 2 * (Math.asin(vtlLen / 2 / initRadius));
                    var tpag = ag, i = 0;
                    while (tpag <= 2 * Math.PI) {
                        var h = Math.sin(Math.PI - tpag) * initRadius;
                        var w = Math.cos(Math.PI - tpag) * initRadius;
                        tpOne.push({
                            y: moveToY - parseInt(h.toFixed(2)),
                            x: moveToX + parseInt(w.toFixed(2)),
                            rotate: calculateAngel(i, (ag) / Math.PI * 180)
                        });
                        tpag += ag;
                        i++;
                    }
                    return tpOne;
                }
                return getCircle(vtlLen, initRadius);
            }
            
            var initCircle = function(circle){
                if (!circle) {
                    return;
                }
                var firstCircle = circle;
                var eles = firstCircle.find(".circle-content span");
                var pos = firstCircle.offset();
                var wd = firstCircle.width();
                var ht = firstCircle.height();
                var list = generateArcListCorrdinate({
                    relativeX: ht / 2 - 16,
                    relativeY: wd / 2 - 16,
                    radius: 118 + 16,
                    stepLen: 32
                });
                
                for (var i = 0; i < list.length; i++) {
                    var l = list[i];
                    eles.eq(i).css({
                        left: l.x,
                        top: l.y,
                        position: "absolute"
                    });
                }
                
            };
            
            $(document).ready(function(){
                var circles = $(".nav-pannel .circle");
                $(".circle .circle-content span").each(function(i, k){
                
                    dragable({
                        ele: $(k)
                    });
                });
                
                
                for (var i = 0; i < circles.length; i++) {
                
                    initCircle(circles.eq(i));
                }
                
                
                
                $(".search input").click(function(){
                    var circle1 = circle.add({
                        radius: 118 + 16,
                        stepLen: 32,
                        relativeX: 264 / 2 - 16,
                        relativeY: 264 / 2 - 16,
                    });
                    var that = $("#nav-pannel");
                    that.children().eq(0).append(circle1.circleEle.circle);
                });
                
                $("#nav-pannel").delegate("div.circle", "click", function(){
                    var circleId = $(this).attr("id");
                    var cc = circleId && circle.circles[circleId];
                    
                    cc.addSmallCnt('<span class="weibo"></span>');
                    
                    
                });
				var cnt = '<div style="background:red; width:300px; height:300px; float:left;"></div><div style="background:green; width:300px; height:300px; float:left;"></div><div style="background:blue; width:300px; height:300px; float:left;"></div><div style="background:yellow; width:300px; height:300px; float:left;"></div>';
				
				var sd = slider.add({
					pannel:{
						css:{
							width:500,
							height:300,
							overflow: "hidden",
							position:"relative"
						},
						cnt:cnt,
					},
					sliderDirection:"h",
					stepDistance:"400"
				});
				
                $("#test-slider").append(sd.pannel.pannelEle);
				
				$("#next").click(function(){
					
					sd.next();
				});
				var i =0;
				$("#prev").click(function(){
					sd.prev();

				});
				
            });
        </script>
    </body>
</html>
